<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>R&D</title>
    <link rel="stylesheet" href="css/reset.css">
  <link rel="Shortcut Icon" href="images/icon.png" type="image/x-icon">
    
    <style>
        /*选项卡的样式*/
        
        .option_card {
            width: 90%;
            margin: 100px auto;
            overflow: hidden;
        }
        
        .option_card .options {
            width: 23%;
            float: left;
            border-right: 1px solid #e5e5e5;
        }
        
        .option_card .options li {
            height: 35px;
            line-height: 35px;
            color: #000;
            cursor: pointer;
            margin-top: 12px;
            width: 99.2%;
            font-size: 16px;
        }
        
        .option_card .options li:last-child {
            margin-bottom: 12px;
        }
        
        .option_card .options li.current {
            border-right: 5px solid #fab554;
            color: #fab554;
        }
        
        .option_card .card {
            width: 76%;
            float: right;
            margin: 0 auto;
        }
        .option_card .card #list1 p{
            line-height: 30px;
        }
        
        .option_card .card ul {
            width: 96%;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .option_card .card .cardli {
            display: none;
        }
        
        .option_card .card li.current {
            display: block;
        }
        
        .sjx {
            display: none;
        }
        
        .sjxH {
            display: inline-block;
        }
        
        .child-menu {
            padding: 10px;
        }
        
        .pipeline_container {
            position: relative;
            margin-top: 20px;
            /*margin-left: 90px;*/
            display: none;
            padding: 0;
            padding-bottom: 20px;
        }
        
        .pipeline {
            position: absolute;
            width: 70px;
            height: 80px;
            margin-top: -2px;
        }
        
        .pipeline .pp_title {
            font-size: 14px;
            height: 38px;
            line-height: 55px;
            text-align: center;
        }
        
        .pipeline .pp_num {
            font-size: 20px;
            height: 40px;
            line-height: 20px;
            text-align: center;
        }
        
        .pipeline1 {
            color: #333;
            background: url("images/pipeline/1.png") no-repeat transparent;
        }
        
        .pipeline2 {
            color: #333;
            background: url("images/pipeline/2.png") no-repeat transparent;
        }
        
        .pipeline3 {
            color: #333;
            background: url("images/pipeline/3.png") no-repeat transparent;
        }
        
        .pipeline1.on,
        .pipeline1:hover {
            color: white;
            background: url("images/pipeline/1_on.png") no-repeat transparent;
            cursor: pointer;
            z-index: 999;
        }
        
        .pipeline2.on,
        .pipeline2:hover {
            color: white;
            background: url("images/pipeline/2_on.png") no-repeat transparent;
            cursor: pointer;
            z-index: 999;
        }
        
        .pipeline3.on,
        .pipeline3:hover {
            color: white;
            background: url("images/pipeline/3_on.png") no-repeat transparent;
            cursor: pointer;
            z-index: 999;
        }
        /*选项一的表格样式*/
        
        #table {
            margin-top: 10px;
        }
        
        #table img {
            height: 40px;
            width: 100px;
            vertical-align: middle;
        }
        
        #tableList {
            width: 100%;
            /*background-color: #f6f7f8*/
            overflow: hidden;
        }
        
        #tableList li {
            float: left;
            font-size: 14px;
            min-height: 40px;
            text-align: center;
            box-sizing: border-box;
            position: relative;
            border-bottom: 1px solid #fab554
        }
        
        #tableList li:nth-child(1) div,
        #tableList li:nth-child(2) div,
        #tableList li:nth-child(3) div,
        #tableList li:nth-child(6) div {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            transform: translate(-50%, -50%);
        }
        
        #tableList li:nth-child(4) span,
        #tableList li:nth-child(5) span {
            
            height: 25px;
            padding-top: 10px;
     
           
            word-wrap: break-word;
            /*border-bottom: 1px solid #eee;*/
            display: inline-block;
           
        }
             #tableList li:nth-child(4) span:first-child,
        #tableList li:nth-child(5) span:first-child{
            border-bottom: 1px solid #eee;


        }
        
    /*    #tableList:nth-child(odd) {
            background-color: #eee;
        }*/
        
        #tableList.active {
            background-color: #56c9c1 !important;
            height: 50px !important;
            color:#fff;
        }
        
        #tableList.active li {
            line-height: 50px !important;
        }
        
        .hidden {
            display: none;
        }
        
        a {
            color: #000;
        }
       #productionCon span,#productionCon p{
            line-height: 30px;
           display: inline-block;
           

        }
    /*图片阴影样式*/
  
                  
    #developmentCon img,#clinicalCon img,#productionCon img{
            box-shadow: 0px 0px 5px 0px #999;
          

    }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="nav">
            <div class="logo">
                <img src="images/logo_01.png" alt="">
            </div>
            <ul class="navul">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="p2.html">About us</a>
                    <ul class="child">
                        <li>
                            <a href="p2.html?id=1">Overview</a>
                        </li>
                        <li>
                            <a href="p2.html?id=2">CEO Message</a>
                        </li>
                        <li>
                            <a href="p2.html?id=3">Vision and Misson</a>
                        </li>
                        <li>
                            <a href="p2.html?id=4">Management Team</a>
                        </li>
                        <li>
                            <a href="p2.html?id=5">Scientific Advisory Board</a>
                        </li>
                        <li>
                            <a href="p2.html?id=6">Investors</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="p3.html"  style="font-weight:bold;font-style: italic;">R&D</a>
                    <ul class="child">
                        <li>
                            <a href="p3.html">Pipeline</a>
                        </li>
                    <!--     <li>
                            <a href="p3.html?id=2">Pre-clinical Development</a>
                        </li>
                        <li>
                            <a href="p3.html?id=3">Clinical & Regulatory</a>
                        </li> -->
                        <li>
                            <a href="p3.html?id=4">Facility</a>
                        </li>

                    </ul>

                </li>
                <li>
                    <a href="p4.html">Partnerships</a>
                    <ul class="child">
                        <li>
                            <a href="p4.html">Business Development</a>
                        </li>
                        <li>
                            <a href="p4.html?id=2">Partners</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="p5.html">News</a>
                </li>
                <li>
                    <a href="p6.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="main">
        <div class="option_card">
            <div class="options">
                <ul>
                    <li class="current" id="firstLi">Pipeline
                        <img src="images/sjx.png" alt="" class="sjx">
                        <img src="images/sjx1.png" alt="" class="sjxH">

                    </li>
                    <div class="child-menu pipeline_container" id="pipeline_container">
                    </div>

                    <li id="development" style="display: none;">Pre-clinical Development</li>
                    <li id="clinical" style="display: none;">Clinical & Regulatory</li>
                    <li id="production">Facility</li>
                </ul>
            </div>
            <div class="card">
                <ul>
                    <li class="cardli current" id="list1">
                        <p>Overview</p>
                        <div id="table">
                            <ul id="tableList" class="active">
                                <li style="width: 10%;">Code</li>
                                <li style="width: 18%">Commerical Rights</li>
                                <li style="width: 18%">Target (indication)</li>
                                <li style="width: 11%">Area</li>
                                <li style="width: 25%">Clinical Stage</li>
                                <li style="width: 18%">Partners</li>
                            </ul>
                        </div>


                    </li>
                    <li class="cardli"></li>
                    <li class="cardli" id="developmentCon">
                       

                    </li>
                    <li class="cardli" id="clinicalCon"></li>
                    <li class="cardli" id="productionCon"></li>

                </ul>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="footer">
        <div class="footer_nav">
            <ul>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="p2.html">About us</a>
                </li>
                <li>
                    <a href="p3.html" style="font-weight:bold;font-style: italic;">R&D</a>
                </li>
                <li>
                    <a href="p4.html">Partnerships</a>
                </li>
                <li>
                    <a href="p5.html">News</a>
                </li>
                <li>
                    <a href="p6.html">Contact</a>
                </li>
            </ul>
            <div class="logo">
                <img src="images/footer_logo.png" alt="">
            </div>

        </div>
    </div>
    <!-- 版权信息 -->
    <div class="copy">
        <p>Copyright 2018 © EOC Pharma 沪ICP备 17043104号
        </p>
    </div>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/public.js"></script>
    <script>
        //选项卡事件
        var flag = 1;
        $(".options li").click(function() {
            // $(this).addClass('current').siblings().removeClass('current');
            // $(".card .cardli").hide().eq($(this).index()).show();
            // if ($(this).index() !== 0) {
            // 	$('.sjxH').hide();
            // 	$('.sjx').show();
            // 	$(".child-menu").hide();
            // 	flag = 1;
            // } else {
            // 	$('.sjxH').show();
            // 	$('.sjx').hide();

            // }
            // if($(this).index()!=0){
            window.location = "p3.html?page=" + ($(this).index() + 1);


            // }

        })
        if (GetQueryString("id") == null || GetQueryString("id") == 1) {
            $(".card .cardli").hide().eq(0).show();
            $('.sjxH').show();
            $('.sjx').hide();

        } else if (GetQueryString("id") == 2) {
            $(".card .cardli").hide().eq(GetQueryString("id")).show();
            $(".options li").removeClass('current').eq(GetQueryString("id") - 1).addClass('current');
            $('.sjxH').hide();
            $('.sjx').show();

        } else if (GetQueryString("id") == 3) {
            $(".card .cardli").hide().eq(GetQueryString("id")).show();
            $(".options li").removeClass('current').eq(GetQueryString("id") - 1).addClass('current');
            $('.sjxH').hide();
            $('.sjx').show();

        } else if (GetQueryString("id") == 4) {
            $(".card .cardli").hide().eq(GetQueryString("id")).show();
            $(".options li").removeClass('current').eq(GetQueryString("id") - 1).addClass('current');
            $('.sjxH').hide();
            $('.sjx').show();

        }

        if (GetQueryString("page")) {

            if (GetQueryString("page") == 1) {
                // $(".card li").hide().eq(0).show();
                console.log("page1")
                $(".child-menu").show();
                flag = 0;

                $('.sjxH').show();
                $('.sjx').hide();

            } else if (GetQueryString("page") == 3) {
                $(".card .cardli").hide().eq(2).show();
                $(".options li").removeClass('current').eq(1).addClass('current');
                $('.sjxH').hide();
                $('.sjx').show();

            } else if (GetQueryString("page") == 4) {
                $(".card .cardli").hide().eq(GetQueryString("page") - 1).show();
                $(".options li").removeClass('current').eq(GetQueryString("page") - 2).addClass('current');
                $('.sjxH').hide();
                $('.sjx').show();

            } else if (GetQueryString("page") == 5) {
                $(".card .cardli").hide().eq(GetQueryString("page") - 1).show();
                $(".options li").removeClass('current').eq(GetQueryString("page") - 2).addClass('current');
                $('.sjxH').hide();
                $('.sjx').show();

            }

        }

        //点击菜单展开 再点收起来


        $("#firstLi").click(function() {
                if (flag == 1) {
                    $(".child-menu").show();
                    flag = 0;
                } else {
                    $(".child-menu").hide();
                    flag = 1;
                    window.location = "p3.html"


                }

            })
            // 请求开发接口
        $("#development").click(function() {
            developmentApi();
        });
        if (GetQueryString("id") == 2 || GetQueryString("page") == 3) {
            developmentApi();
        }
        // 请求临床接口
        $("#clinical").click(function() {
            clinicalApi();
        });
        if (GetQueryString("id") == 3 || GetQueryString("page") == 4) {
            clinicalApi();
        }
        // 请求生产接口
        $("#production").click(function() {
            productionApi();
        });
        if (GetQueryString("id") == 4 || GetQueryString("page") == 5) {
            productionApi();
        }



        if (GetQueryString("objId") !== null) {


            lxApi();


            //请求项目接口
            $("#list1").empty();
            $.ajax({
                url: siteUrl + '/ObjText/' + GetQueryString("objId"),
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    console.log(data)
                    if (data.status == true) {

        //                 $("<p>").html(`  
								// 		${data.message.data}
								// 	</p>    
								// <p style="margin-top:50px;font-size:16px;">新闻链接</p>                        

									
								// `).appendTo("#list1");
                                  $("<p>").html(("  \n" + data.message.data + "\n</p>    \n<p style=\"margin-top:50px;font-size:16px;\">新闻链接</p>                        \n\n\n")).appendTo("#list1");
  
                        //通过项目id关联到相关新闻
                        $.ajax({
                            url: siteUrl + '/news/' + GetQueryString("objId"),
                            type: 'GET',
                            dataType: 'json',
                            success: function(data) {
                                if (data.status == true) {
                                    console.log(2)
                                    $.each(data.message.data, function(index, item) {
                                        var str = encodeURI(item.text);
           //                              $("<div style='margin-top:10px'>").html(`  
											// 		<p style="color:#fab554;font-size:16px;cursor:pointer;" onclick="newsDetail('${item.title}','${str}','${item.day}','${item.month}','${item.year}')">${item.title}</p>
											// 	</div>                       
															
											// `).appendTo("#list1");

  $("<div style='margin-top:10px'>").html(("  \n<p style=\"color:#fab554;font-size:16px;cursor:pointer;\" onclick=\"newsDetail('" + item.title + "','" + str + "','" + item.day + "','" + item.month + "','" + item.year + "')\">" + item.title + "</p>\n</div>                       \n\n")).appendTo("#list1");

//# sourceURL=traceured.js
                                    })

                                } else {
                                    alert("发生错误")
                                }
                            },
                            error: function(err) {
                                console.log("请求失败" + err)
                            }
                        })


                    } else {
                        alert("发生错误")
                    }
                },
                error: function(err) {
                    console.log("请求失败" + err)
                }
            })


        } else {
            lxApi();
            progressManagementApi();


        }


        backgroundApi();




        function newsDetail(title, text, day, month, year) {
            localStorage.setItem("title", title);
            localStorage.setItem("day", day);
            localStorage.setItem("month", month);
            localStorage.setItem("year", year);
            localStorage.setItem("text", decodeURI(text));
            window.location = "p5.html?aaa=1"
        }
    </script>

</body>

</html>